<template>
  <div class="course-info">
    <!-- 单元格，所有内容全部分布在一个个单元格中 -->
    <!-- 样式绑定，实现购买和不购买不同样式 -->
    <van-cell-group :style="style">
      <!-- 顶部图片展示区，绑定数据 -->
      <van-cell class="course-image">
        <van-image
          width="375px"
          height="280px"
          fit="fill"
          :src="info.courseImgUrl"
        />
      </van-cell>
      <!-- 课程文字信息 -->
      <van-cell class="info-text">
        <h2>{{info.courseName}}</h2>
        <p>{{info.previewFirstField}}</p>
        <p class="info-text-buy">
          <span class="l">
            <i class="discounts">¥{{info.discounts}}</i>
            <i class="price">¥{{info.price}}</i>
          </span>
          <span class="r">
            <i>{{info.sales}}人已购</i>
            <i>每周三、周五更新</i>
          </span>
        </p>
      </van-cell>
      <!-- 底部课程详情、内容 -->
      <van-cell class="tabs">
        <!-- tab标签，开启粘性布局、滚动 -->
        <van-tabs scrollspy sticky>
          <!-- 详情 -->
          <van-tab title="详情">
            <!-- 绑定数据 -->
            <div v-html="info.courseDescription"></div>
          </van-tab>
          <!-- 内容 -->
          <van-tab class="tab-content" title="内容">
            <!-- 遍历课程章节 -->
            <div v-for="section in SectionAndLesson" :key="section.id">
              <!-- 创建章节组件实例，把章节内容 传递给子组件 -->
              <lesson :section="section"></lesson>
            </div>
          </van-tab>
        </van-tabs>
      </van-cell>
    </van-cell-group>
    <!-- 底部标签栏 -->
    <van-tabbar v-if="!info.isBuy">
      <span class="l">
        <i>{{info.discountsTag}}</i>
        <i class="discounts">¥{{info.discounts}}</i>
        <i class="price">¥{{info.price}}</i>
      </span>
      <!-- 立即购买按钮添加点击事件跳转购买页 -->
      <van-button type="primary" @click="goPay">立即购买</van-button>
    </van-tabbar>
  </div>
</template>

<script>
// 引入章节组件
import lesson from './son/lesson'
// 引入接口：获取课程详情，获取课程章节
import { getCourseById, getSectionAndLesson } from '@/api/course'
export default {
  name: 'course-info',
  // 接收参数
  props: {
    // 路径参数
    courseId: {
      type: [Number, String],
      required: true
    }
  },
  data () {
    return {
      // 课程详情
      info: {},
      // 课程章节信息数据
      SectionAndLesson: {},
      // 样式绑定，购买设置定位为0
      style: {
        bottom: 0
      }
    }
  },
  // 钩子函数
  created () {
    // 调用函数
    this.getCourseInfo()
  },
  methods: {
    // 立即购买点击事件
    goPay () {
      if (this.$store.state.user) {
        // 如果已经登陆，直接带课程id跳转购买
        this.$router.push(`/pay/${this.courseId}`)
      } else {
        // 如果没登陆，跳转登陆，将要前往的页面路由保存为参数
        this.$router.push({
          name: 'login',
          query: {
            path: this.$route.fullPath
          }
        })
      }
    },
    // 初始化获取课程详情
    async getCourseInfo () {
      // 获取课程详情
      const { data } = await getCourseById(this.courseId)
      // 如果没有购买，将绑定样式清空
      if (!data.content.isBuy) this.style = null
      // 获取课程章节
      const { data: data2 } = await getSectionAndLesson(this.courseId)
      // 把获取到的课程详情数据交给data
      this.info = data.content
      this.SectionAndLesson = data2.content.courseSectionList
    }
  },
  // 注册组件
  components: {
    lesson
  }
}
</script>

<style lang="scss" scoped>
// 内容区定位
.van-cell-group {
  position: fixed;
  top: 0;
  bottom: 50px;
  overflow-y: auto;
}
// 清除单元格组件默认padding
.van-cell {
  padding: 0;
}
// 顶部图片
.course-image {
  height: 280px;
}
// 中间文字信息
.info-text {
  padding: 10px 20px;
  .info-text-buy {
    display: flex;
    justify-content: space-between;
  }
  .discounts {
    margin-right: 5px;
    font-size: 24px;
    color: #ff7452;
    font-weight: 700;
  }
  .r {
    line-height: 28px;
    font-size: 12px;
    color: #666;
    i {
      padding: 7px 8px;
      border-radius: 5px;
      margin-left: 10px;
      background: #f8f9fa;
      font-weight: 700;
    }
  }
}
// 课程内容
.tab-content {
  padding: 0 20px;
}
// 底部标签栏
.van-tabbar {
  display: flex;
  box-sizing: border-box;
  padding: 0 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .l .discounts {
    margin: 0 5px;
    font-size: 24px;
    color: #ff7452;
    font-weight: 700;
  }
  .van-button {
    height: 80%;
    width: 50%;
  }
}
</style>
